<!-- 占道经营/视频监控 -->
<template>
	<div class="chunk_conall flex flex-direction">
		<!-- <checked-title title="视频监控"></checked-title> -->
		<div class="chunk_title">
			<p>
				<span>案件采集总量:</span>
				<span>{{ count }}</span>
				<span>件</span>
			</p>
		</div>
		<div class="chunk_con flex">
			<div class="chunk_con_left" id="sVideoSurveillance" ref="sVideoSurveillance"></div>
		</div>
	</div>
</template>

<script>
import Highcharts from "highcharts";
import highcharts3d from "highcharts/highcharts-3d";
highcharts3d(Highcharts);
import {
	getDeviceNumScreen
} from '@/api/index'
import { ZhanDaoJingYing } from '@/api'
export default {
	data() {
		return {
			snapNumScreen: {},
			chartData: [],
			count: '',
		}
	},
	mounted() {
		// this.renderChart();
		this.getlist()
	},
	beforeDestroy() {
    this.desHander();
  },
	methods: {
		//shuju 
		getlist() {
			ZhanDaoJingYing.CaijiTongji().then((res) => {
				let obj = res.data[0];
				let obj1 = {
          qtcount: '其他来源',
					szcount: '数字城管',
					bmcount: '便民热线',
				}
				for(let k in obj){
					if (k == 'count') {
            this.count = obj[k];
					} else {
						this.chartData.push([obj1[k], obj[k]])
					}
				}
				this.echarts1()
			}).catch((err) => {
			});
		},
		echarts1() {
			var chart = Highcharts.chart("sVideoSurveillance", {
				chart: {
					type: "pie",
					backgroundColor: "rgba(0,0,0,0)",
					options3d: {
						enabled: true, //显示图表是否设置为3D， 我们将其设置为 true
						alpha: 65 //图表视图旋转角度
					}
				},
				title: {
					text: ""
				},
				legend: {
					layout: "vertical",
					align: "right", //程度标的目标地位
					verticalAlign: "top", //垂直标的目标地位
					x: 0, //间隔x轴的间隔
					y: 0, //间隔Y轴的间隔
					symbolWidth: 10,
					symbolHeight: 10,
					itemMarginTop: 10,
					data: ["待进场", "施工建设", "验收"],
					itemStyle: {
						color: "#fff",
						fontSize: 14,
						cursor:'pointer'
					},
					labelFormatter: function () {
						return this.name + "<b>  " + this.y + " 件";
					}
				},
				credits: {
					enabled: false // 禁用版权信息
				},
				tooltip: {
					formatter: function () {
						return (
							" <b> " +
							this.point.name +
							" </b>: " +
							Highcharts.numberFormat(this.percentage, 1) +
							" %   " +
							this.y + "件"
						);
					}
				},
				plotOptions: {
					pie: {
						allowPointSelect: true, //每个扇块能否选中
						innerSize: 50,
						depth: 30, //饼图的厚度
						dataLabels: {
							enabled: false, //是否显示饼图的线形tip
							formatter: function () {
								if (this.percentage > 4)
									return Highcharts.numberFormat(this.percentage, 1) + "%";
							}
						}
					}
				},
				colors: [
					"rgba(44, 97, 255, 1)",
					"rgba(53, 207, 231, 1)",
					"rgba(189, 25, 207, 1)"
				],
				series: [{
					name: "工单类型占比",
					showInLegend: true,
					clockWise: true,
					center: ["50%", "28%"],
					data: this.chartData.reverse(),
					cursor: 'pointer'
				}]
			});
		},
		desHander(){
      let myChart = echarts.init(this.$refs.sVideoSurveillance);
      myChart.dispose();
    },
	},
};
</script>

<style lang="less" scoped>
.chunk_conall {
	width: 100%;
	// margin-bottom: 20px;
}

.chunk_title {
	width: 85%;
	height: 58px;
	background: url("~@/assets/images/content/libj.png") no-repeat;
	background-size: 100% 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;

	p {
		display: flex;
		align-items: flex-end;

		span {
			display: inline-block;
		}

		span:nth-child(1) {
			font-size: 18px;
			font-family: ShiShangZhongHeiJianTi;
			font-weight: 400;
			color: #FFFFFF;
		}

		span:nth-child(2) {
			font-size: 24px;
			font-family: DIN;
			font-weight: bold;
			color: #0ECEFF;
			line-height: 18px;
			margin: 0 10px 0 26px;
		}

		span:nth-child(3) {
			font-size: 12px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #CCCCCC;
		}
	}
}

.chunk_con {
	// height: calc(100% - 40px);

	.chunk_con_left {
		flex: 1;
		height: 168px;

		// height: 100%;
		// padding-right: 30px;
	}

	.chunk_con_right {
		flex: 1;
		// height: 100%;
		// padding: 20px 0;

		.right-total {
			// height: 100%;
			flex-direction: column;
			justify-content: space-between;

			li {
				padding: 10px 0;
				// height: 47%;
				margin-top: 15px;
				width: 100%;
				background: url("~@/assets/images/content/libj.png") no-repeat;
				background-size: 100% 100%;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;

				&>p {
					&:first-of-type {
						line-height: 1;
						color: #229eff;
						font-size: 28px;

						&>span {
							font-size: 14px;
							color: #229eff;
							margin-left: 2px;
						}
					}

					&:last-of-type {
						color: white;
						font-size: 12px;
						margin-top: 5px;
					}
				}
			}
		}
	}
}</style>
